<template>
  <a-card :bordered="false">
    <!-- 查询区域 -->
    <div class="table-page-search-wrapper">
      <a-form layout="inline" @keyup.enter.native="searchQuery">
        <a-row :gutter="24">
          <a-col :xl="10" :lg="11" :md="12" :sm="24">
            <a-form-item label="统计日期">
              <j-date v-model="queryParam.today_begin" style="width:45%" placeholder="请选择开始时间" ></j-date>
              <span style="width: 10px;">~</span>
              <j-date v-model="queryParam.today_end" style="width:45%" placeholder="请选择结束时间"></j-date>
            </a-form-item>
          </a-col>
          <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
              <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
              <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
            </span>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <!-- 查询区域-END -->
    <div style="height:100px;margin-bottom: 20px">
      <a-row :gutter="8">
        <a-col :xl="3" :lg="8" :md="8" :sm="24" class="centered-box">
          <div class="box-content" style="background-color: #fea7b7;">
            <span>
              <div>{{sumObj.sumWomanNum ? sumObj.sumWomanNum : 0}} 人</div>
              <div>注册女用户合计</div>
            </span>
          </div>
        </a-col>
        <a-col :xl="3" :lg="8" :md="8" :sm="24" class="centered-box">
          <div class="box-content" style="background-color: #ffa366;">
            <span>
              <div>{{sumObj.sumManNum ? sumObj.sumManNum : 0}} 人</div>
              <div>注册男用户合计</div>
            </span>
          </div>
        </a-col>
        <a-col :xl="3" :lg="8" :md="8" :sm="24" class="centered-box">
          <div class="box-content" style="background-color: #ffd166;">
            <span>
              <div>{{sumObj.sumTotalNum ? sumObj.sumTotalNum : 0}} 人</div>
              <div>每日注册人数合计</div>
            </span>
          </div>
        </a-col>
        <a-col :xl="3" :lg="8" :md="8" :sm="24" class="centered-box">
          <div class="box-content" style="background-color: #b4de85">
            <span>
              <div>{{sumObj.sumRechargeNum ? sumObj.sumRechargeNum : 0}} 人</div>
              <div>充值人数合计</div>
            </span>
          </div>
        </a-col>
        <a-col :xl="3" :lg="8" :md="8" :sm="24" class="centered-box">
          <div class="box-content" style="background-color: #8ae6cd">
            <span>
              <div>{{sumObj.sumFirstFlushNum ? sumObj.sumFirstFlushNum : 0}} 人</div>
              <div>首充人数合计</div>
            </span>
          </div>
        </a-col>
        <a-col :xl="3" :lg="8" :md="8" :sm="24" class="centered-box">
          <div class="box-content" style="background-color: #90d0f0">
            <span>
              <div>{{sumObj.sumTotalAmount ? sumObj.sumTotalAmount : 0}} 元</div>
              <div>总金额合计</div>
            </span>
          </div>
        </a-col>
        <a-col :xl="3" :lg="8" :md="8" :sm="24" class="centered-box">
          <div class="box-content" style="background-color: #ae90f0">
            <span>
              <div>{{sumObj.sumTotalVideoNum ? sumObj.sumTotalVideoNum : 0}} 分钟</div>
              <div>视频聊天分钟数合计</div>
            </span>
          </div>
        </a-col>
        <a-col :xl="3" :lg="8" :md="8" :sm="24" class="centered-box">
          <div class="box-content" style="background-color: #5078c8">
            <span>
              <div>{{sumObj.sumTotalGoldNum ? sumObj.sumTotalGoldNum : 0}} 金币</div>
              <div>消费金币合计</div>
            </span>
          </div>
        </a-col>
      </a-row>
    </div>

    <!-- 操作按钮区域 -->
<!--    <div class="table-operator">
      <a-button type="primary" icon="download" @click="handleExportXls('系统每天统计')">导出</a-button>
    </div>-->

    <!-- table区域-begin -->
    <div>
      <a-table
        ref="table"
        size="middle"
        :scroll="{x:true}"
        bordered
        rowKey="id"
        :columns="columns"
        :dataSource="dataSource"
        :pagination="ipagination"
        :loading="loading"
        :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
        class="j-table-force-nowrap"
        @change="handleTableChange">

      </a-table>
    </div>
  </a-card>
</template>

<script>

  import '@/assets/less/TableExpand.less'
  import { mixinDevice } from '@/utils/mixin'
  import { JeecgListMixin } from '@/mixins/JeecgListMixin'

  export default {
    name: 'EverydayCountList',
    mixins:[JeecgListMixin, mixinDevice],
    components: {
    },
    data () {
      return {
        description: '系统每天统计管理页面',
        // 表头
        columns: [
          {
            title: '#',
            dataIndex: '',
            key:'rowIndex',
            width:60,
            align:"center",
            customRender:function (t,r,index) {
              return parseInt(index)+1;
            }
          },
          {
            title:'统计日期',
            align:"center",
            dataIndex: 'today'
          },
          {
            title:'注册女用户(人)',
            align:"center",
            dataIndex: 'womanNum'
          },
          {
            title:'注册男用户(人)',
            align:"center",
            dataIndex: 'manNum'
          },
          {
            title:'注册总人数(人)',
            align:"center",
            dataIndex: 'totalNum'
          },
          {
            title:'充值人数(人)',
            align:"center",
            dataIndex: 'rechargeNum'
          },
          {
            title:'首冲人数(人)',
            align:"center",
            dataIndex: 'firstFlushNum'
          },
          {
            title:'充值总金额(元)',
            align:"center",
            dataIndex: 'totalAmount'
          },
          {
            title:'视频聊天分钟数合计(分钟)',
            align:"center",
            dataIndex: 'totalVideoNum'
          },
          {
            title:'消费金币合计(金币)',
            align:"center",
            dataIndex: 'totalGoldNum'
          },
        ],
        url: {
          list: "/system/everydayCount/list",
        },
        dictOptions:{},
        superFieldList:[],
      }
    },
    created() {
    },
    computed: {
      importExcelUrl: function(){
        return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`;
      },
    },
    methods: {

    }
  }
</script>
<style scoped>
  @import '~@assets/less/common.less';
  .centered-box {
    height: 100px/* 设置方框的高度 */;
    border: 0px solid #ccc; /* 可选，添加边框以便看出方框 */

  }

  .box-content {
    display: flex;
    text-align: center;
    font-size: 17px;
    color: #fff;
    font-weight: bold;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    border-radius: 10px; /* 添加边框圆角，你可以根据需要调整这个数值 */
  }
</style>
